<template>
  <div>
    <el-form
        v-loading="loading"
        element-loading-text="正在登入。。。"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :rules="rules"
        ref="loginForm"
        :model="loginForm"
        class="loginContainer">
      <h3 class="loginTitle">系统登入</h3>
      <el-form-item prop="username">
        <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input style="width: 250px;margin-right: 5px" type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码"></el-input>
        <img :src="captchaUrl" @click="updateCaptcha">
      </el-form-item>
      <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox><br>
      <el-row>
        <el-button type="primary" style="width: 48%"  @click="submitLogin">登入</el-button>
        <el-button type="success" style="width: 48%"  @click="registerDialogVisible = true">注册</el-button>
      </el-row>
    </el-form>
    <el-dialog title="注册信息"
               :visible.sync="registerDialogVisible"
               width="35%">
      <div style="width: 90%">
        <el-form :model="registerForm" :rules="registerRules" ref="registerForm" label-width="100px" >
          <el-form-item label="姓名" prop="name" >
            <el-input v-model="registerForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="registerForm.sex" style="margin-top: 13px">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="身份证号码" prop="idCard">
            <el-input v-model="registerForm.idCard" placeholder="请输入身份证号码"></el-input>
          </el-form-item>
          <el-form-item label="宗门" prop="sect_id">
            <el-select v-model="registerForm.sect_id"
                       filterable
                       placeholder="请选择"
                       @change="selectSectNameClick"
                       ref="sect">
              <el-option
                  v-for="item in sects"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="registerForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" required>
            <el-col :span="11">
              <el-form-item prop="birthday">
                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="registerForm.birthday" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker placeholder="选择时间" value-format="HH:mm:ss" v-model="registerForm.date2" style="width: 100%;"></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="区域" prop="region">
            <el-input v-model="registerForm.region" placeholder="请输入区域"></el-input>
          </el-form-item>
          <el-form-item label="座右铭" prop="motto" >
            <el-input type="textarea" v-model="registerForm.motto" placeholder="请输入座右铭"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="registerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="register">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


export default {
  name: "Login",
  data(){
    return {
      sects:[],
      value:"",
      registerDialogVisible:false,
      captchaUrl:'/captcha?='+new Date(),
      loginForm:{
        username:'admin',
        password:'123',
        code:''
      },
      registerForm:{
        name:"",
        sex:"",
        idCard:"",
        birthday:"",
        date2:"",
        sect_id:"",
        sect_name:"",
        region:"",
        motto:"",
        email:"",
        phone:""
      },
      checked:true,
      loading:false,
      rules:{
        username:[{required:true,message:'请输入用户名',trigger:'blur'}],
        password:[{required:true,message:'请输入密码',trigger:'blur'}],
        code:[{required:true,message:'请输入验证码',trigger:'blur'}]
      },
      registerRules:{
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { pattern:/^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/,
            message: '邮箱格式不正确'
            , trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern:/^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/,
          message: '手机号码格式不正确',
            trigger: 'blur' }
        ],
        idCard:[
          {required:true,message:'请输入身份证号码',trigger:'blur'},
          {pattern:/^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/,
            message:'身份证号码不正确',
            trigger:'blur'}
        ],
        sect_id: [
          { required: true, message: '请选择宗门', trigger: 'change' }
        ],
        birthday: [
          {  required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          {  required: true, message: '请选择时间', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择性別', trigger: 'change' }
        ],
        region: [
          { required: true, message: '请填写区域', trigger: 'blur' }
        ],
        motto: [
      { required: true, message: '请填写座右铭', trigger: 'blur' }
    ]
      }
    }
  },
  methods:{
    //初始化宗门
    initSects(){
      this.$getRequest("/system/basic/sect/allow").then(resp=>{
        if(resp){
          this.sects = resp;
        }
      })
    },
    //获取选中的部门名称
    selectSectNameClick(id){
      this.registerForm.sect_id = id;
      // 注意！！！！：一定要是在nextTick数据更新后才会有值
      this.$nextTick(() => {
            this.registerForm.sect_name = this.$refs["sect"].selected.currentLabel;
      })
    },
    //注册信息
    register(){
      this.$refs['registerForm'].validate((valid) => {
        if (valid) {
          this.registerForm.birthday = this.registerForm.birthday +" "+this.registerForm.date2;
          this.$postRequest("/register",this.registerForm).then(resp=>{
              if(resp){
                this.$message.success(resp.message);
                this.registerForm = {
                  name:"",
                  sex:"",
                  idCard:"",
                  birthday:"",
                  date2:"",
                  sect_id:"",
                  sect_name:"",
                  region:"",
                  motto:"",
                  email:"",
                  phone:""
                }
                this.$router.replace("/");
                this.registerDialogVisible = false;
              }

          })

        } else {
          this.$message.error('请输入所有的字段');
          return false;
        }
      });
    },
    //登入
     submitLogin(){
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           //alert('submit!');
           //this.$router.push("/echarts");
           this.$postRequest('/login',this.loginForm).then(resp=>{
             alert(JSON.stringify(resp));
             if(resp){
               this.loading=false;
               //存储用户token
               const tokenStr = resp.obj.tokenHead+resp.obj.token;
               window.sessionStorage.setItem("tokenStr",tokenStr);
               window.sessionStorage.setItem("userInfo",JSON.stringify(resp.obj.userInfo));
               console.log("userInfo--》"+resp.obj.userInfo)
               //跳转首页
               this.$router.replace("/Home");

              // this.$getRequest('/system/cfg/menu', this.loginForm).then(resp=>{
              //   alert(JSON.stringify(resp));
              // })
             }else {
               this.loading=false;
             }
           })
         } else {
           this.$message.error('请输入所有的字段');
           return false;
         }
       });
    },
    updateCaptcha(){
       this.captchaUrl='/captcha?time='+new Date();
    }
  },
  mounted() {
    this.initSects();
  }
}
</script>

<style>
.loginContainer{
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;

}
.loginTitle{
  margin: 0px auto 40px auto;
  text-align: center;
}
.loginRemember{
  text-align: left;
  margin: 0px 0px 15px 0px;
}
.el-form-item__content{
  display: flex;
  align-items: center;
}
</style>
